<template>
  <div class="query-container">
    <div class="shawBox">
      <el-form :inline="true" :model="queryForm" class="query-form">
        <el-form-item label="用户类型:">
          <el-select v-model="queryForm.type" placeholder="请选择">
            <el-option
              v-for="item in userTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批结果:">
          <el-select v-model="queryForm.result" placeholder="请选择">
            <el-option label="请选择" value=""></el-option>
            <el-option label="通过" value="1"></el-option>
            <el-option label="拒绝" value="0"></el-option>
            <el-option label="待审批" value="-1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态:">
          <el-select v-model="queryForm.status" placeholder="请选择">
            <el-option label="请选择" value=""></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="未启用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <div style="float: right">
          <el-button type="primary" @click="getSystemUsers">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </el-form>
      <el-table
        :data="tableData"
        class="custom-table"
        style="width: 100%"
        height="calc(100vh - 240px)"
      >
        <el-table-column label="序号" align="center">
          <template #default="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户"></el-table-column>
        <el-table-column prop="nickName" label="真实姓名"></el-table-column>
        <el-table-column prop="roleName" label="用户类型"></el-table-column>
        <el-table-column prop="company" label="工作单位"></el-table-column>
        <el-table-column prop="status" label="用户状态">
          <template #default="scope">
            <span v-if="scope.row.status">启用 </span>
            <span v-else>未启用 </span>
          </template>
        </el-table-column>
        <el-table-column label="用户审批" align="center">
          <template #header>
            <div class="custom-header">用户审批</div>
          </template>
          <template #default="scope">
            <div class="cell-content">
              <div class="status-text" v-if="scope.row.auditStatus == 1">
                审批通过
              </div>
              <div class="status-text" v-if="scope.row.auditStatus == 0">
                审批拒绝
              </div>
              <div class="action-buttons" v-if="scope.row.auditStatus == -1">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleAgree(scope.row.id)"
                >
                  同意
                </el-button>
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleUnAgree(scope.row.id)"
                  >拒绝</el-button
                >
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 15px; float: right; text-align: center"
      >
      </el-pagination>
    </div>
    <div style="height: 10px"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
// import { ElMessage } from "element-plus";
import {
  typesRoleApi,
  systemUsersApi,
  systemUserIdAuditApi,
} from "@/api/other";

// 查询表单数据
const queryForm = ref({
  type: "",
  status: "",
  result: "",
});

const userTypeOptions = ref([]);

let tableData = ref([]);

// 分页相关数据
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

// 处理重置
const handleReset = () => {
  queryForm.value.type = "";
  queryForm.value.status = "";
  queryForm.value.result = "";
  pageSize.value = 10;
  currentPage.value = 1;
  getSystemUsers();
};

// 处理每页条数改变
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  getSystemUsers();
};

// 处理当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getSystemUsers();
};

const handleUnAgree = async (id) => {
  const paramsObj = {
    id: id,
    auditStatus: 0,
  };
  const { code } = await systemUserIdAuditApi(paramsObj);
  if (code === 200) {
    currentPage.value = 1;
    getSystemUsers();
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};
const handleAgree = async (id) => {
  const paramsObj = {
    id: id,
    auditStatus: 1,
  };
  const { code } = await systemUserIdAuditApi(paramsObj);
  if (code === 200) {
    currentPage.value = 1;
    getSystemUsers();
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};
const getSystemUsers = async () => {
  const paramsObj = {
    auditStatus: queryForm.value.result,
    status: queryForm.value.status,
    userType: queryForm.value.type,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  };
  const { code, data } = await systemUsersApi(paramsObj);
  if (code === 200) {
    tableData.value = data.list;
    total.value = data.total;
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};
const getTypesRole = async () => {
  const { code, data } = await typesRoleApi();
  if (code === 200) {
    data.unshift({
      id: "",
      name: "请选择",
      code: "",
    });
    userTypeOptions.value = data;
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

onMounted(() => {
  getSystemUsers();
  getTypesRole();
});
</script>

<style scoped lang="scss">
.query-container {
  position: relative;
  text-align: left;
  font-size: 14px;
  color: #222;
  .shawBox {
    min-height: calc(100vh - 113px);
    overflow: hidden;
    fill: #fff;
    border-radius: 12px;
    background-color: #fff;
    filter: drop-shadow(0 0 15px rgba(14, 41, 73, 0.1));
    padding: 15px;
    box-sizing: border-box;
  }
}
:deep(.el-form-item__content) {
  width: 150px;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 22px;
  margin-bottom: 15px;
}
:deep(.el-form-item__label) {
  color: #222;
}
.query-form {
  position: relative;
}
:deep(.el-pager li.is-active) {
  color: #fff;
  background: #286bf4;
  cursor: default;
  font-weight: bold;
}

/* 自定义表格样式 */
::v-deep .custom-table .el-table__header {
  height: 40px;
  line-height: 40px;
  background: #f6f9ff;
}
::v-deep .custom-table .el-table__header th {
  font-size: 12px;
  font-weight: 700;
  background: #f6f9ff;
  color: #222;
}
::v-deep .custom-table .el-table__row:nth-child(even) {
  background: #f9fbfd !important;
}
::v-deep .custom-table .el-table__row:nth-child(odd) {
  background-color: transparent;
}
::v-deep .custom-table .el-table__body td {
  color: #222;
}
:deep(.el-table .cell) {
  text-align: left;
}
/* 更新部分 */
::v-deep .custom-table .el-table__body td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 0 !important;
  width: 100% !important; /* 继承列的固定宽度 */
}
::v-deep .custom-table .el-table__body .cell {
  width: 100% !important;
  overflow: hidden !important;
}
:deep(.custom-tooltip) {
  background-color: #286bf4 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}
::v-deep .shawBox {
  /* 输入框字体 */
  .el-input__inner {
    font-size: 12px !important;
  }
  /* 下拉选择器 选中项字体 */
  .el-select__selected-item {
    font-size: 12px !important;
  }
  /* 下拉选择器 占位符字体 */
  .el-select__placeholder {
    font-size: 12px !important;
  }
  /* 下拉选择器 下拉选项字体 */
  .el-select-dropdown__item {
    font-size: 12px !important;
  }
  /* 日期选择器 关联输入框字体 */
  .el-date-editor .el-input__inner {
    font-size: 12px !important;
  }
}
</style>
